<template>
  <div>
    <vol-box :model.sync="model" title="创建分销商品" :width="950" :height="500">
      <VolForm ref="myform" :loadKey="loadKey" :formFileds="formFileds" :formRules="formRules"
        :labelWidth="100"></VolForm>
      <div class="toolbar">
        <div class="title form-text">
          <span>
            <Icon type="md-list-box" />
            发布商品
          </span>
        </div>
      </div>
      <!-- 表格  -->
      <VolTable :height="340" ref="table"  :columns="columns" :ck="false"
        :index="true" :tableData="tableData">
      </VolTable>
      <!-- 添加slot槽覆盖footer的按钮，添加新的按钮 -->
      <div slot="footer">
        <Button type="error" @click="getFirstRow" icon="md-checkmark">保存</Button>
        <Button type="info" @click="close" icon="md-close">关闭</Button>
      </div>
    </vol-box>
  </div>
</template>
<script>
export default {
  components: {
    VolBox: () => import("@/components/basic/VolBox.vue"),
    VolForm: () => import("@/components/basic/VolForm.vue"),
    VolTable: () => import("@/components/basic/VolTable.vue"),
  },
  data() {
    return {
      loading: false,
      loadKey: true,
      model: false,
      formFileds: {
        producttype: [],
        productid: "",
        distributionName: "",
        distributionid: "",
      },
      formRules: [
        [
          {
            title: "分销商",
            required: true,
            field: "distributionName",
            type: "select",
            colSize: 4,
            dataKey: '',
            data: []
          },
          {
            title: "产品类型",
            required: true,
            field: "producttype",
            type: "cascader",
            dataKey: "tree_protype",
            orginData: [],
            data: [],
            colSize: 4,
            onChange: (v) => {
              let parmas = {
                page: 1,
                rows: 30,
                sort: "createDate",
                order: "desc",
                wheres: `[{"name":"typeCode","value":"${
                  v[v.length - 1]
                }","displayType":"cascader"},{\"name\":\"distributionid\",\"value\":\"${
                  this.formFileds.distributionid
                }\",\"displayType\":\"select\"},{\"name\":\"effectiveState\",\"value\":\"0\",\"displayType\":\"select\"}]`,
              };
              let productid = this.getFormOption("productid");
              this.http
                .post("/api/distriProducts/getPageData", parmas)
                .then((res) => {
                  productid.data = res.rows.map((i) => {
                    return {
                      key: i.id,
                      value: i.productName,
                    };
                  });
                });
            },
          },
          {
            title: "产品名称",
            field: "productid",
            type: "select",
            colSize: 4,
            data: [],
            required: true,
            onChange: (v) => {
              let parmas = {
                page: 1,
                rows: 30,
                sort: "id",
                order: "desc",
                wheres: "[]",
                value: v,
              };

              this.http
                .post("/api/distriProducts/getDetailPage", parmas)
                .then((res) => {
                  this.tableData = res.rows
                });
            },
          },
        ],
      ],
      // 列表数据
      tableData: [],
      columns: [
        {
          field: "spare2",
          title: "商品编码",
          type: "string",
          width: 150,
          align: "left",
          fixed: "left",
        },
        {
          field: "spare1",
          title: "商品名称",
          type: "string",
          width: 150,
          align: "left",
          fixed: "left",
        },
        {
          field: "offlineCode",
          title: "线下编码",
          type: "string",
          require: true,
          width: 150,
          // edit: { type: "text" },
          align: "left",
        },
        // {
        //   field: "sellingPrice",
        //   title: "门市价",
        //   type: "string",
        //   width: 100,
        //   edit: { type: "decimal" },
        //   align: "left",
        // },
        {
          field: "preferentialPrice",
          title: "优惠价",
          type: "string",
          width: 90,
          // edit: { type: "decimal" },
          align: "left",
        },
        // {
        //   field: "vipPrice",
        //   title: "会员价",
        //   type: "string",
        //   width: 90,
        //   edit: { type: "decimal" },
        //   align: "left",
        // },
        // {
        //   field: "settlementPrice",
        //   title: "结算价",
        //   type: "string",
        //   width: 90,
        //   edit: { type: "decimal" },
        //   align: "left",
        // },
        // {
        //   field: "channelPrice",
        //   title: "渠道价",
        //   type: "string",
        //   width: 90,
        //   edit: { type: "decimal" },
        //   align: "left",
        // },
        // {
        //   field: "isAvailable",
        //   title: "是否可用",
        //   type: "int",
        //   edit: { type: "switch" },
        //   width: 90,
        //   align: "left",
        // },
      ],
    };
  },
  created() {
    this.http
      .post("/api/Dictionary/GetVueDictionary", ["tree_protype"])
      .then((res) => {
        res[0].data.forEach((i) => {
          i.label = i.value;
        });
        this.formRules.forEach((i) => {
          i.forEach((x) => {
            if (x.field == "producttype") {
              x.data.push(
                ...this.base.convertTree(
                  JSON.parse(JSON.stringify(res[0].data)),
                  (node, data, isRoot) => {
                    node.label = node.value;
                    node.value = node.key;
                  }
                )
              );
              x.orginData.push(...res[0].data);
            }
          });
        });
      });
      this.getMenu()
  },
  methods: {
    getMenu() {
      let params = {
        page: 1,
        rows: 30,
        sort: "createDate",
        order: "desc",
        wheres:
          '[{"name":"distributorType","value":"2006,2004","displayType":"checkbox"}]',
      };
      this.http
        .post("api/DistributorNews/getPageData", params, false)
        .then((reslut) => {
          let vf = this.getFormOption('distributionName')
          vf.data = reslut.rows
        });
    },
    getFormOption(field) {
      let option;
      this.formRules.forEach((x) => {
        x.forEach((item) => {
          if (item.field == field) {
            option = item;
          }
        });
      });
      return option;
    },
    open(row) {
      console.log("行数据", row);
      this.$refs.myform.reset(); //重置表单
      this.$refs.table.reset(); //重置表格
      this.getModel(row.distributorCode); //分销商详情
      this.formFileds.distributionid = row.distributorCode; //分销商
      this.formFileds.distributionName = row.distributorName; //分销商名称
    },
    getModel(val) {
      //根据分销商ID获取分销商的详细信息
      this.http
        .get("api/distriProducts/GetDistributors?id=" + val, {}, true)
        .then((reslut) => {
          if (reslut) {
            this.formFileds.status = reslut.data.status;
            this.formFileds.code = reslut.data.distributorCode;
            this.model = true; //打开弹框
          }
        });
    },
    getProductModel(val) {
      //根据产品ID获取产品下所有商品
      this.http
        .get("api/distriProducts/getGoods?id=" + val, {}, true)
        .then((reslut) => {
          this.formFileds.supplierid = reslut.data.disCode;
          reslut.data.goodList.forEach((item) => {
            let dataitem = {};
            dataitem.spare1 = item.name;
            dataitem.spare2 = item.code;
            dataitem.goodid = item.goodId;
            dataitem.sellingPrice = item.originalPrice;
            dataitem.preferentialPrice = item.preferentialPrice;
            dataitem.vipPrice = 0;
            dataitem.settlementPrice = 0;
            dataitem.channelPrice = 0;
            dataitem.offlineCode = item.offlineCode;
            dataitem.isAvailable = 1;
            this.$refs.table.addRow(dataitem);
          });
        });
    },
    // 保存按钮
    getFirstRow() {
      console.log("aaa", this.formFileds, this.tableData);
      this.$refs.myform.validate(() => {
        if (!this.tableData.length) {
          return this.$Message.error("请选择有商品的产品");
        }
        this.http.get("/api/distriProducts/UpdateisDistriProduct?distriprodtctid=" + this.formFileds.productid).then((res) => {
          if (res.status) {
            this.close(); //关闭弹窗
            this.$Message.success(res.message);
          } else {
            this.$Message.error(res.message);
          }
        });
      });
    },
    close() {
      this.model = false;
    },
  },
};
</script>
<style lang="less" scoped>
.toolbar {
  padding: 3px 15px;
  width: 100%;
  display: flex;
  //  padding: 3px;
  border-top: 1px solid #eae9e9;
  // border-top-left-radius: 5px;
  // // background: #37aba0;
  // border-top-right-radius: 5px;
  // border: 1px solid #f1f1f1;
  .title {
    line-height: 28px;
    border-bottom: 2px solid #03a9f4;
    font-size: 14px;
    font-weight: bolder;
    margin-bottom: 0;
    color: #828282;
    .icon {
      color: #009688;
      font-size: 18px;
    }
  }
  .btns {
    line-height: 28px;
    flex: 1;
    text-align: right;
    margin-right: 12px;
    button {
      border: none;
      margin-left: 15px;
      border: 0px;
      color: #009688;
    }
    button:hover {
      color: #ff9800;
      border-color: #ff9800;
      border: none;
    }
  }
}
</style>
